<template>
<h2>
  {{fullname}}
</h2>
  <button v-on:click="setFullname">设置fullname</button>
</template>

<script>
import {computed, reactive} from "vue";

export default {
  name: "App",
  setup(props,context){
    const names=reactive({
      firstName:'ding+',
      lastName:'jie'
    })

    const fullname=computed({
      get:()=>{
        return names.firstName+" "+names.lastName
      },
      set:val=>{
        let nameArr=val.split(" ")
        names.firstName=nameArr[0]
        names.lastName=nameArr[1]
      }
    })

    const setFullname=()=>{
      fullname.value='dddd haha'
    }

    return{
      fullname,
      setFullname
    }
  }
}
</script>

<style scoped>

</style>